var OptsMixin = {
    init: function() {
      this.on('updated', function() { console.log('Updated!') })
    },

    getOpts: function() {
        return this.opts;
    },

    setOpts: function(opts, update) {
        this.opts = opts;

        if(!update) {
            this.update();
        }

        return this;
    }
}
riot.mount('todo',{title:'my todo app',items:[]})

riot.mixin('mixinName', mixinObject)

<my-tag>
    <h1>{ opts.title }</h1>
    <h1>{ opts.items }</h1>
    <p>{val}</p>

    this.mixin(OptsMixin)
    this.mixin('mixinName')
    this.on('before-mount', function() {
        // 标签被加载之前
    })

    this.on('mount', function() {
      // 标签实例被加载到页面上以后
    })

    this.on('update', function() {
      // 允许在更新之前重新计算上下文数据
    })

    this.on('updated', function() {
      // 标签模板更新后
      this.val = some / complex * expression ^ here
    })

    this.on('before-unmount', function() {
      // 标签实例被删除之前
    })

    this.on('unmount', function() {
      // 标签实例被从页面上删除后
    })

    // 想监听所有事件？
    this.on('all', function(eventName) {
      console.info(eventName)
    })

</my-tag>


<todo>
    <div each={items}>
        <h3>{title}</h3>
        <a onclick={parent.remove}>Remove</a>
    </div>

    this.items =[{title:'First'},{title:'Second'}]

    remove(event){
        var item = event.item;
        var index = this.items.indexOf(item);
        this.items.splice(index,1);
    }
</todo>

<my-tag>
  <p each="{ name, i in arr }">{ i }: { name }</p>

  this.arr = [ true, 110, Math.random(), 'fourth']
</my-tag>
// name 是元素的名字，i 是索引. 这两个变量的变量名可以自由选择。
<dl>
  <virtual each={item in items}>
    <dt>{item.key}</dt>
    <dd>{item.value}</dd>
  </virtual>
</dl>
<ul riot-tag="my-tag"></ul>